<template>
	<view class="home">
		<view class="home-card">
			<IndexSwiper :dataList='swiperList'></IndexSwiper>
		</view>
			<view class="information">
				设备信息：{{device_id}}
			</view>
		<view class="container">
			<view class="goods-card"
			v-for="(item,index) in goodsList"
			:key="index"
			 @tap="showPop(item.goods_id)">
				<view class="goods-title">物理消炎</view>
					<view class="goods-name">{{item.goods_name}}</view>
					<view class="goods-introduction">{{item.introduction}}</view>
			</view>
			<view class="member-card">
				<view class="member-card-text">会员卡</view>
				<button class="member-card-button" @tap="goMember">去办理</button>
			</view>
			<!-- 底部弹出层 -->
			<view class="pop" v-show="isShow" @touchmove.stop.prevent=''>
				<!-- 蒙层 -->
				<view class="pop-mask" @tap="hidePop">
				</view>
				<!-- 内容块 -->
				<view class="pop-box" 
				v-for="(item,index) in goodsList"
				:key="index"
				:animation="animationData"
				 v-if="currentGoodsId === item.goods_id">
					<view class="pop-item">
						<text style="font-weight: bold;">付款确认</text>
						<image @tap="hidePop" src="https://kx.taipingkeji.com/upload/1/common/images/20231218/20231218101210170290873001672.png" mode=""></image>
					</view >
					<view class="pop-item">
						<view class="">价格</view>
						<view class="">{{item.price}}</view>
					</view>
					<view class="pop-item">
						<view class="">付款方式</view>
						<view class="">
							<text>请选择付款方式</text>
							<image src="https://kx.taipingkeji.com/upload/1/common/images/20231218/20231218101210170290873009127.png" mode=""></image>
						</view>
						
					</view>
					<view class="pop-item">
						<view class="">
							<image src="https://kx.taipingkeji.com/upload/1/common/images/20231218/20231218101210170290873007358.png" mode=""></image>
							<text>康烯（会员卡）还剩{{userInfo.number_times ? userInfo.number_times : ' '}}次</text>
						</view>
						<image src="https://kx.taipingkeji.com/upload/1/common/images/20231218/20231218101210170290873003099.png" mode=""></image>
						
					</view>
					<view class="pop-item">
						<image src="https://kx.taipingkeji.com/upload/1/common/images/20231218/20231218101210170290873003099.png" mode=""></image>
						<view style="color: red;">已仔细阅读并自愿接受全部告知事项</view>
					</view>
					<button @tap="startPower">立即开机</button>
				</view>
			</view>
		</view>
		<Tabbar cureentPage='index'></Tabbar>
	</view>
</template>

<script>
import request from "../../api/request";
import IndexSwiper from '@/components/index/IndexSwiper.vue'
import Tabbar from '@/components/common/Tabbar.vue'
// import {mapState} from 'vuex';

export default {
	data() {
		return {
			isShow:false,
			animationData:{},
			currentGoodsId:'',
			swiperList:[],
		    goodsList:[],
		    current: 0,
			device_id: null,
			userInfo:{},
			token:'',
			q:'',
		}
	  },
	components:{
	  	IndexSwiper,
		Tabbar
	  },
	  onShareAppMessage(res) {
	      return {
	           // title: '康烯生活', //分享的名称
	           path: '/pages/index/index',
	  		success: res => {
	  			console.info(res)
	  		}
	  	}
	  },
	onShareTimeline(res){
		return {
			title: '康烯生活',
			}
	},
	onLoad(query) {	
		this.q = decodeURIComponent(query.q);
		console.log("query:",query);
		console.log("q:",this.q);
		//this.q = 'http://kx.taipingkeji.com/kx/index/jumpUrl/device_id/869734050395866'
		if(this.q){
			this.getDeviceIdFromScanCode();
		}
		this.getLoginCode();
		this.getPackage();
		this.getSwiperData();
		this.getDeviceIdFromUrl();
		this.getTokenAndDeviceId();
		uni.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
		},
	onShow(){
		this.token = uni.getStorageSync('token');
		setTimeout(()=>{
		   this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
		},500)
		this.device_id = uni.getStorageSync('device_id');
	},
	methods: {
		getTokenAndDeviceId(){
			 this.token = uni.getStorageSync('token') || '';
			 this.device_id = uni.getStorageSync('device_id') || '';
			 this.userInfo = JSON.parse(uni.getStorageSync('userInfo')) || {};
		},
		getDeviceIdFromUrl() {
			
			// #ifdef H5
			const path = this.$route.path || ''; // 获取当前页面路径
			const query = this.$route.query || {}; // 获取当前页面的查询参数
			const device_id = query.device_id || ''; // 获取指定参数，比如device_id
			
			//#endif
			// #ifdef MP-WEIXIN
			const pages = getCurrentPages(); // 获取当前页面栈
			const currentPage = pages[pages.length - 1]; // 获取最顶层页面
			const path = currentPage.route || ''; // 获取当前页面路径
			const query = currentPage.options || {}; // 获取当前页面的查询参数
			const device_id = query.device_id || ''; // 获取指定参数，比如device_id
			
			//#endif
			
			if(device_id){
				uni.setStorageSync('device_id', device_id);
			}
			return device_id;
		},
		getDeviceIdFromScanCode(){
			const parts = this.q.split('/');
			let device_id;
						
			for (let i = 0; i < parts.length; i++) {
			  if (parts[i] === 'device_id') {
				let device_id = parts[i + 1];
				uni.setStorageSync('device_id', device_id); // 将设备 ID 存储到本地缓存中
				break; // 找到设备 ID 后跳出循环
			  }
			}	
		},
		// startPower() {
		// 	if (!this.token) {
		// 	  uni.showToast({
		// 			title: '请先登录',
		// 			icon: 'none',
		// 			duration: 1000
		// 		  });
		// 		  setTimeout(() => {
		// 			uni.redirectTo({
		// 			  url: '../login/login'
		// 			});
		// 		  }, 1000);
		// 		  return;
		// 	}
		// 	if (!this.device_id) {
		// 	   uni.showToast({
		// 			 title: '请先扫码获取设备信息',
		// 			 icon: 'none',
		// 			 duration: 1000
		// 		});
		// 		return;
		// 	}
		// 	request({
		// 		url: '/kx/index/startPower',
		// 		data: { 
		// 			token:this.token,
		// 			device_id:this.device_id 
		// 		},
		// 	});
		// 	uni.showLoading({
		// 		title:"开机中..."
		// 	}),
		// 	setTimeout(() => {
		// 		uni.hideLoading();
		// 		uni.showToast({
		// 		  title: '开机成功',
		// 		  icon: 'none',
		// 		  duration: 2000
		// 		});
		// 		request({
		// 			url: '/kx/index/getUserInfo',
		// 			 data: { token: this.token },
		// 			successCb: (res) => {
		// 				console.log('数据结果：',res)
		// 				this.userInfo =res.data.data;
		// 				// 保存用户信息
		// 				uni.setStorageSync('userInfo',JSON.stringify(this.userInfo))
		// 				console.log('this.userInfo',this.userInfo)
		// 			},
		// 		});
		// 	}, 3000);
		// },
		startPower() {
			const that = this
			if (!this.token) {
			  uni.showToast({
			        title: '请先登录',
			        icon: 'none',
			        duration: 1000
			      });
			      setTimeout(() => {
			        uni.redirectTo({
			          url: '../login/login'
			        });
			      }, 1000);
			      return;
			}
			// if (!this.device_id) {
			//    uni.showToast({
			//          title: '请先扫码获取设备信息',
			//          icon: 'none',
			//          duration: 1000
			//     });
			// 	return;
			// }
			uni.showLoading({
				title:"开机中..."
			}),
		    request({
		        url: '/kx/index/power',
		        data: { 
		            token:this.token,
		            device_id: this.device_id
		        },
				successCb: (res) => {
					uni.hideLoading();
					that.isShow =  false
				    that.getUserInfo()
					uni.showToast({
						  title: res.data.message,
						  icon: 'none',
						  duration: 2000
					});
				},
				failCb: (err) => {
				  uni.$u.toast('未知错误请联系客服')    
				}
		    });
			setTimeout(() => {
			  uni.hideLoading();
			}, 5000);
		},
		getUserInfo(){
			const that = this
			request({
				url: '/kx/index/getUserInfo',
				 data: { token: that.token },
				successCb: (res) => {
					that.userInfo =res.data.data;
					// 保存用户信息
					uni.setStorageSync('userInfo',JSON.stringify(that.userInfo))
				},
			});
		},
		goMember(){
			uni.navigateTo({
				url:'../member/member'
			})
		},
		getSwiperData(){
			request({
				url: '/kx/index/getBanner',
				// data: { id: 1 },
				successCb: (res) => {
					this.swiperList = res.data;
				},
			});
		},
		getPackage(){
			request({
				url: '/kx/index/getPackage',
				successCb: (res) => {
					this.goodsList =res.data;
				},
			});
		},
		showPop(goodsId){
			var animation = uni.createAnimation({
			   duration: 200
			})
			animation.translateY(600).step();
			this.animationData = animation.export();
			this.isShow = true;
			this.currentGoodsId = goodsId; // 将当前的 goodsId 存储起来
			setTimeout(()=>{
				animation.translateY(0).step();
				this.animationData = animation.export();
			},200)
		},
		hidePop(){
			var animation = uni.createAnimation({
			   duration: 200
			})
			animation.translateY(600).step();
			this.animationData = animation.export();
			this.isShow = true;
			setTimeout(()=>{
				animation.translateY(0).step();
				this.isShow = false;
			},200)
		},
		getLoginCode(){
			uni.login({
			  provider: 'weixin', //使用微信登录
			  success: function (loginRes) {
				request({
				url: '/kx/index/getOpenid',
				data: { code: loginRes.code },
					successCb: (res) => {
						console.log('数据结果：',res);
						uni.setStorageSync('openid', res.data);
					},
				});
			  }
			});
		},
	  }
	}
</script>

<style lang="scss">
	page{
		background-color: #f6f6f6; 
	}
	.home-card{
		z-index:1;
	}
	.home-swiper{
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;
		overflow: hidden; 
	}
	.information{
		text-align: right; 
		font-size: 28rpx; 
		margin: 30rpx 20rpx; 
	}
	.container {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	  }
	.goods-card{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 645rpx;
		height: 142rpx;
		background-color: white;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
	}
	.goods-title {
	  color: #fff;
	  margin: 0;
	  padding: 5px;
	  background-image: url(https://kx.taipingkeji.com/upload/1/common/images/20231218/20231218101155170290871530061.png);
	  font-size: 12px; 
	  border-radius: 10rpx;
	}
	.goods-introduction {
	  margin-right: 20px;
	}
	.member-card {
	    display: flex;
	    justify-content: space-between;
	    width: 645rpx;
	    height: 112rpx;
		background-image: url(https://kx.taipingkeji.com/upload/1/common/images/20231218/20231218101155170290871530061.png);
	    align-items: center;
		border-radius: 10rpx;
	  }
	.member-card-text{
		  color: #fff;
		  font-weight: bold;
		  font-size: 32rpx;
		  margin:0 20rpx;
	  }
	.member-card-button {
		  margin:0 20rpx;
	      font-size: 26rpx;
	      color: #fff; 
	      border: 1rpx solid #fff; 
	      background-color: transparent; 
		  border-radius: 50px;
	    }
	.pop{
		position: fixed;
		left: 0;
		top:0;
		width: 100%;
		height: 100%;
		z-index: 9999;
	}
	.pop-mask{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.3);
	}
	.pop-box{
		position: absolute;
		left: 0;
		bottom: 100rpx;
		width: 100%;
		height: 300px;
		background-color: #fff;
		border-top-left-radius: 10px; 
		border-top-right-radius: 10px;
	}
	.pop-item {
	  margin:10px 15px 20px 15px;
	  display: flex;
	  justify-content: space-between;
	}
	.pop-item image{
		width:30rpx;
		height:30rpx;
	}
	.pop-box button {
		color:#fff;
		font-size: 28rpx;
		width: 400rpx; 
		height: 80rpx; 
		line-height: 90rpx;
		border-radius: 50rpx;
		background-image: url(https://kx.taipingkeji.com/upload/1/common/images/20231218/20231218101155170290871530061.png); 
	}
	  
	
	
</style>
